<template>
  <div class='playedView'>
    <div class="top">
      <div class="musicFlim">
          <img
            v-if="playedSongObj.al.picUrl"
            class="songImg"
            :src="playedSongObj.al.picUrl"
            :style="rotateAnimation"
            width="100%"
          >
          <img
            v-else
            class="songImg"
            src="../image/logo.png"
            :style="rotateAnimation"
            width="100%"
          >
      </div>
      <div class="songNameAndAuthor">
        <div class="songName">
          {{ playedSongObj.name ? playedSongObj.name : '未播放' }}
        </div>
        <div class="author">
          {{ playedSongObj.ar ? playedSongObj.ar[0].name : '' }}
        </div>
      </div>
    </div>

    <song-lyric
     :changeCurrentTime = changeCurrentTime
    ></song-lyric>

    <!-- 底部区域 -->
    <div class="bottom">
      <div class="timeCount">
        <span>{{ audio.currentTime | filterMusicTimeMin }}</span>
        <span>{{ audio.duration| filterMusicTimeMin }}</span>
      </div>
      <van-slider
        v-model="sliderProgress"
        @change="onChange"
        @input="onMove"
      />
    </div>
    <control-song
      @storagePlayingSongList="$emit('storagePlayingSongList')"
    />
  </div>
  <!-- / 底部区域 -->
</template>

<script>
import { mapState } from 'vuex'
import { Slider, Toast } from 'vant'
import songLyric from './component/songLyric'
import controlSong from './component/controlSong.vue'

export default {
  name: 'playedView',
  components: {
    [Slider.name]: Slider,
    [Toast.name]: Toast,
    songLyric,
    controlSong
  },
  props: {},
  data () {
    return {
      // 旋转动画 CSS
      rotateAnimation: {
        transform: 'rotate(0deg)'
      },
      // 旋转角度
      deg: 0,
      // 旋转动画定时器
      rotateAnimationTimer: null,
      // 进度条的进度
      sliderProgress: 0,
      // 进度条的宽度
      sliderWidth: 0,
      changeCurrentTime: 0
    }
  },
  computed: {
    ...mapState(['playedSongObj', 'isPlayStatus', 'audio', 'playingSongList', 'step'])
  },
  watch: {
    isPlayStatus: function () {
      if (this.isPlayStatus === true) {
        this.rotateAnimationTimer = this.rotateAnimationMethod()
      } else {
        clearInterval(this.rotateAnimationTimer)
      }
    }
  },
  created () {},
  mounted () {
    if (this.isPlayStatus === true) {
      this.rotateAnimationTimer = this.rotateAnimationMethod()
    }
    this.sliderWidth = document.querySelectorAll('.van-slider')[0].offsetWidth
  },
  methods: {
    rotateAnimationMethod () {
      clearInterval(this.rotateAnimationTimer)
      return setInterval(() => {
        this.deg += 0.8
        this.rotateAnimation.transform = 'rotate(' + this.deg + 'deg)'
        this.sliderProgress = (this.sliderWidth / this.audio.duration * this.audio.currentTime) / this.sliderWidth * 100
      }, 50)
    },
    onChange () {
      this.audio.currentTime = Math.floor(this.audio.duration) * (this.sliderProgress / 100)
    },
    onMove (sliderProgress) {
      var data = Math.floor(this.audio.duration) * (sliderProgress / 100)
      var minute = Math.floor(data / 60)
      var second = Math.floor(data - (minute * 60))
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      var time = minute + ':' + second
      this.changeCurrentTime = time
      Toast('当前值：' + time)
    }
  }
}
</script>
<style lang='less' scoped>
@import "../../styles/common.less";
.playedView {
  height: 100vh;
  overflow: hidden;
  padding: 0px 15px;
  display: flex;
  flex-direction: column;
  .top {
    .musicFlim {
      overflow: hidden;
      margin-top: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      .songImg {
        width: 150px;
        height: 150px;
        border: solid #000000 70px;
        border-radius: 300px;
        background-size: cover;
      }
    }
    .songNameAndAuthor {
      margin-top: 20px;
      text-align: center;
      line-height: 25px;
      .songName {
        font-size: 18px;
        color: #383838;
      }
      .author {
        font-size: 14px;
        color: #cccccc;
      }
    }
  }
  .bottom {
    padding: 0 10px;
    .timeCount {
      height: 24px;
      display: flex;
      justify-content: space-between;
      span {
        font-size: 12px;
        line-height: 24px;
        color: #b5b5b5;
      }
    }
    .van-slider {
      height: 3px;
      /deep/ .van-slider__bar {
        background-color: @themeColor;
      }
      /deep/ .van-slider__button {
        width: 12px;
        height: 12px;
      }
    }
  }
}
</style>
